<template>
  <div class="home">
	  <div class="viewpager">
		  <!-- <div class="iconBox_one">
			  <i class="iconfont icon-list"></i>
		  </div> -->
		  <!-- <router-link class="select" :to="{name:'mine'}">我的</router-link> -->
		  <router-link class="select" :to="{name:'recommend'}">推荐音乐</router-link>
		  <router-link class="select" :to="{name:'hotsong'}">热歌榜</router-link>
		  <router-link class="select" :to="{name:'search'}">搜索</router-link>
		  <!-- <div class="iconBox_two" @click="searchClick">
			  <i class="iconfont icon-sousuo1"></i>
		  </div> -->
	  </div>
	<!-- 显示子路由内容 -->
	<router-view></router-view>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'home',
  methods:{
	  searchClick(){
		  this.$router.push({name:'search'})
	  }
  },
  components: {
	  
  }
}
</script>

<style lang="scss" scoped>
	.home{
		color: black;
		.router-link-active{
			font-size: 22px;
			color: red;
		}
		.iconBox_one{
			margin-right: 30px;
			width: 40px;
			>i{
				font-size: 25px;
			}
		}
		.iconBox_two{
			margin-left: 30px;
			width: 40px;
			>i{
				font-size: 18px;
				vertical-align: -webkit-baseline-middle;
			}
		}
		.viewpager{
			height: 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid ghostwhite;
			.select{
				flex: 1;
				// display: block;
				width: 30%;
				height: 100%;
				text-align: center;
				cursor: pointer;
				line-height: 40px;
				// color: black;
			}
		}
	}
</style>